Basic認証を設定したAPI GatewayのREST APIにReactアプリから接続したときの挙動

#React

若槻龍太

2021.08.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

最近、Amazon API GatewayのREST APIにBasic認証を掛けて利用する検討をしていたのですが、その際にブラウザから直接ではなくWebアプリからアクセスした際にどのような挙動となるのか調べる必要がありました。

そこで今回は、Basic認証を設定したAPI GatewayのREST APIをWebアプリ（React）から接続したときの挙動を確認してみました。

REST APIの準備

Basic認証を設定したAPI GatewayのREST APIは以下の記事を参考に作成しました。

API GatewayにLambda(Node.js)でBASIC認証かける | DevelopersIO

また下記を参考にREST APIのCORSを有効化し、Reactアプリから接続可能とします。

API Gateway コンソールを使用してリソースで CORS を有効にする - Amazon API Gateway

REST APIの動作確認

REST APIのエンドポイントにブラウザでアクセスするとBasic認証が要求されます。

認証に成功すると200レスポンスが返ります。

このときのリクエストヘッダーをディベロッパーツールで見てみると、authorizationにBasicトークンが指定されています。Reactアプリからも同様にリクエストを行えば良さそうです。

Reactアプリから接続してみる

ReactアプリからREST APIへの接続を試してみます。

環境

React：17.0.2
TypeScript：4.3.5
Axios：0.21.1

`authorization`ヘッダーを指定しない場合

Axiosでauthorizationヘッダーを指定せずにREST APIへアクセスしてみます。

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

const endpointUri = process.env.REACT_APP_REST_API_ENDPOINT_URI!;

const App: React.FC = () => {
  const [body, setBody] = useState<any>();
  useEffect(() => {
    axios
      .get(endpointUri)
      .then((res) => {
        setBody(res.data.body);
      });
  }, []);

  return <div className="App">{body}</div>;
};

export default App;

結果：UnauthorizedExceptionエラー

アクセス時にBasic認証は要求されませんでした。

またAxiosのドキュメントでBasic認証をユーザーに明示的に要求するオプションがないか調べてみましたが特に見当たりませんでした。

`authorization`ヘッダーを指定する場合

Axiosで明示的にauthorizationヘッダーを指定した場合の挙動も見てみます。

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

const endpointUri = process.env.REACT_APP_REST_API_ENDPOINT_URI!;

const App: React.FC = () => {
  const [body, setBody] = useState<any>();
  useEffect(() => {
    axios
      .get(endpointUri, {
        auth: {
          username: "admin",
          password: "password",
        },
      })
      .then((res) => {
        setBody(res.data.body);
      });
  }, []);

  return <div className="App">{body}</div>;
};

export default App;